<template>
  <div class="myOrder_wrap">
    <header class="cur_header">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <h3 class="title" :class="`active${activeIndex}`">
        <div class="order_nav" :class="{'active': index === activeIndex}" v-for="(item,index) in navs" :key="index" @click="orderToggle(index)">
          {{item.title}}
        </div>
      </h3>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'myOrder',
  data () {
    return {
      navs: [
        {
          title: 'Buy order',
          path: '/myOrder/buyOrder'
        },
        {
          title: 'Sell order',
          path: '/myOrder/sellOrder'
        }
      ],
      activeIndex: 0
    };
  },
  beforeMount () {
    this.$route.name === 'buyOrder' ? this.activeIndex = 0 : this.activeIndex = 1;
  },
  methods: {
    orderToggle (index) {
      this.activeIndex = index;
      this.$router.replace({path: this.navs[index].path, query: {navIndex: 0}});
    }
  },
  mounted () {
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .myOrder_wrap{
    width: 100%;
    background: #f4f5f7;
    position: relative;
    padding: 90px 0 0;
    height: 100%;
    .cur_header {
      width: 100%;
      height: 90px;
      line-height: 90px;
      background: #fff;
      padding: 0 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      .icon-fanhui {
        font-size: 30px;
        margin-right: 35%;
      }
      .title {
        display: flex;
        width: 42%;
        justify-content: space-between;
        align-items: center;
        margin-left: -45px;
        position: relative;
        &::after {
          display: block;
          content: '';
          width: 125px;
          height: 6px;
          background: #f8a120;
          position: absolute;
          transition: left .3s;
          bottom: 0;
          border-radius: 25px;
        }
        &.active0::after{
          left: 0%;
          content: '';
        }
        &.active1::after{
          left: 56%;
          content: '';
        }
        .order_nav {
          font-weight: normal;
          font-size: 28px;
          color: #666666;
          position: relative;
          height: 80%;
          &.active {
            color: #222222;
          }
          .income{
            margin-right: 60px;
          }
          span {
            display: block;
            margin-right: 30px;
          }
        }
      }
    }
  }
</style>
